<template>
    <div class="container">
      <div v-for="(item,index) in state.appsData" v-bind:key="index" class="app-add"  @click="toAppInfo(item)">
        <!-- <div v-if="item.stop" class="app-stop">已停用</div> -->
        <el-tag v-if="item.isEnable == 0 " class="app-stop" type="warning"
        effect="dark"
        round
        size="small">已停用</el-tag>
        <div>
          <el-icon :size="20" v-if="item.clientType == 'iOS'"><Iphone /></el-icon>
          <el-icon :size="20" v-else><Cellphone /></el-icon>
        </div>
        <div style="text-align: center;">
          {{ item.name }}
        </div>
      </div>
      <div class="app-add " justify="center" @click="state.dialogFormVisible = true" >
        <el-icon size="20"><Plus /></el-icon>
      </div>
    </div>

    <el-dialog v-model="state.dialogFormVisible" title="新建应用" width="500" @close="dialogClose">
      <el-form :model="state.form">
        <el-form-item label="应用名称" :label-width="state.formLabelWidth">
          <el-input v-model="state.form.name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="客户端类型" :label-width="state.formLabelWidth">
          <el-select v-model="state.form.clientType" placeholder="请选择客户端类型">
            <el-option label="Android" value="Android" />
            <el-option label="iOS" value="iOS" />
            <el-option label="鸿蒙" value="Harmony"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注" :label-width="state.formLabelWidth">
            <el-input
              v-model="state.form.description"
              style="width: 240px"
              :rows="2"
              type="textarea"
              placeholder=""
            />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogClose">取消</el-button>
          <el-button type="primary" @click="saveApp">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>

    <router-view></router-view>
</template>
<script lang="ts" setup>
import{ defineComponent,toRefs,reactive, ref, onMounted }from 'vue';
// import router from '@/router/index'
import { useRouter } from "vue-router"
import { ElMessage, ElMessageBox , ElLoading } from 'element-plus'
import { getAppList , addApp } from '@/axios/api'

let loading:any = null;
const openLoading = function(){
  loading = ElLoading.service({
    lock: true,
    text: '加载中...',
    background: 'rgba(0, 0, 0, 0.7)',
  })
}
const closeLoading = function(){
  loading && loading.close();
}

let router = useRouter();
const state = reactive({
    appsData:[
      {
        name:"",
        clientType:"",
        isEnable:1,
        description:""
      }
    ],
    form :{
      name: '',
      clientType: '',
      description:""
    },
    dialogFormVisible:false,
    formLabelWidth:'140px',
    
});
onMounted( async ()=>{
    getAppList().then((res:any)=>{
      state.appsData = res.data.data;
    }).catch(err=>{
        console.log(err)
    });
})

const dialogClose = function(){
    state.form.name = '';
    state.form.clientType = '';
    state.form.description = '';
    state.dialogFormVisible = false;
}

var saveApp = function(){
  if(!state.form.name){
    ElMessageBox.confirm('请输入应用名称', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    });
    return;
  }else if(!state.form.clientType){
    ElMessageBox.confirm('请输入客户端类型', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    });
    return;
  }
  const newApp = {
    name:state.form.name,
    clientType:state.form.clientType,
    description:state.form.description
  }
  openLoading();
  addApp(newApp).then((res:any)=>{
    console.log(res.data.data)
    const data = res.data.data;
    state.appsData.push({
      ...newApp,
      isEnable:1
    });
    closeLoading();
    dialogClose();
  }).catch(err=>{
    closeLoading();
    ElMessage("新建应用失败,详情:" + JSON.stringify(err))
  })


}
var toAppInfo = function(item:any){
  router.push({
    name:'appInfo',
    // path:'/appManagement/appInfo'
    state:{
      data:JSON.stringify(item)
    }
  });
}
</script>

<style lang="scss" scoped>

.container{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  .app-add{
    margin: 10px;
    width: 100px;
    min-width: 100px;
    height: 100px;
    border-radius: 5px;
    background-color: #eee;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border: 1px transparent solid;
    position: relative;
    &:hover{
      border: 1px blueviolet solid;
    }
    .app-stop{
      position: absolute;
      right: 3px;
      top: 3px;

    }
  }

}

</style>